<script>
import {distributionRegister} from "@/api/user"

export default {
    data() {
        return {
            loginForm: {
                // 昵称
                name: "",
                username: "",
                password: "",
                mobile: "",
                roleIds: ["distributer"],
                parentId: "",
                code:""
            },
            registerRules: {
                name: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入昵称"
                    }
                ],
                mobile: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入手机号"
                    }
                ],
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入用户名"
                    }
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入密码"
                    }
                ]
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入用户名"
                    }
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入密码"
                    }
                ],
                code: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入验证码"
                    }
                ]
            },
            loading: false,
            capsTooltip: false,
            text: "注册",
            codeImageKey : new Date().getTime(),
            redirect: undefined,
            otherQuery: {},
        }
    },
    computed: {
        codeImg() {
            return `/api/yuntk/user/cu/sys/base/valid-image?red=249&green=252&blue=255&time=${this.codeImageKey}`;
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                const query = route.query;
                if (query) {
                    this.redirect = query.redirect;
                    this.otherQuery = this.getOtherQuery(query);
                }
            },
            immediate: true
        }
    },
    methods: {
        submit() {
            this.$refs.loginForm.validate(valid => {
                if(!valid) return;
                if(this.text==="注册"){
                    //     登录
                    this.$refs.loginForm.validate(valid=>{
                        if(!valid) return false;
                        this.handleLogin()
                    })
                }else{
                //     注册
                    distributionRegister(this.loginForm).then((res)=>{
                    //     注册完后提示，注册成功，并登录
                        this.$message.success("注册成功");
                        this.handleLogin()
                    })
                }
            });
        },
        toggle() {
            if (this.text === "登录") {
                this.text = "注册"
            } else {
                this.text = "登录"
            }
        },
        checkCapslock(e) {
            const {key} = e;
            this.capsTooltip =
                key && key.length === 1 && key >= "A" && key <= "Z";
        },
        handleLogin() {
            this.loading = true;
            this.$store
                .dispatch("user/login", this.loginForm)
                .then(() => {
                    if (this.redirect === "/403") {
                        this.$router.push({path: "/"});
                        return;
                    }
                    if (this.remember) {
                        localStorage.setItem("username", this.loginForm.username)
                        localStorage.setItem("password", this.loginForm.password)
                    }else{
                        localStorage.removeItem("username")
                        localStorage.removeItem("password")
                    }

                    this.$router.push({
                        path: this.redirect || "/",
                        query: this.otherQuery
                    });

                    this.loading = false;
                    setTimeout(() => {
                        this.codeImageKey++;
                    }, 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.codeImageKey++;
                });
        },
        coverImage(path) {
            if (!path) {
                return "";
            } else if (path.startsWith("http")) {
                return path;
            }
            const state = this.state || this.$store.state;
            const systemImageConfig = state.systemImageConfig;
            for (const vl of systemImageConfig) {
                let result = false;
                (vl.imagePrefix || []).forEach(prefix => {
                    if (!result) {
                        result =
                            path.startsWith(prefix) ||
                            path.startsWith("/" + prefix);
                    }
                });
                if (result) {
                    return result ? vl.imagesHost + path : path;
                }
            }
            return path;
        },
    },
}
</script>

<template>
    <div class="login-container">
        <img class="back" mode="fill"
             :src="coverImage('https://yun-question.oss-cn-beijing.aliyuncs.com/static/admin-bg.jpg')"/>
        <div class="form-container yx-center">
            <el-form
                ref="loginForm"
                :model="loginForm"
                :rules="text==='注册'?loginRules:registerRules"
                class="login-form yx-str"
                autocomplete="off"
                label-position="left"
            >
                <el-form-item prop="username" label="用户名">
                    <el-input
                        v-model="loginForm.username"
                        placeholder="请输入用户名"
                        name="username"
                        type="text"
                        tabindex="1"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input
                        v-model="loginForm.password"
                        placeholder="请输入密码"
                        name="password"
                        type="password"
                        tabindex="2"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item v-if="text==='登录'" prop="name" label="昵称">
                    <el-input
                        v-model="loginForm.name"
                        placeholder="请输入昵称"
                        name="name"
                        type="text"
                        tabindex="3"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item v-if="text==='登录'" prop="mobile" label="手机号">
                    <el-input
                        v-model="loginForm.mobile"
                        placeholder="请输入手机号"
                        name="mobile"
                        type="text"
                        tabindex="4"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item v-if="text==='登录'" :key="codeImageKey" prop="code">
                    <div style="display: flex;align-items: center">
                        <el-input
                            v-model="loginForm.code"
                            placeholder="验证码"
                            class="code-input"
                            @keyup.native="checkCapslock"
                            @blur="capsTooltip = false"
                            @keyup.enter.native="handleLogin"
                        />
                        <img
                            class="code-image pointer"
                            :src="codeImg"
                            @click="codeImageKey++"
                        />

                    </div>
                </el-form-item>
                <el-form-item>
                    <div>
                        <!--                        <el-button type="text">-->
                        <!--                            忘记密码-->
                        <!--                        </el-button>-->
                        <!--                        <el-divider direction="vertical"></el-divider>-->
                        <el-button type="text" @click="toggle">
                            {{ text }}
                        </el-button>
                    </div>

                    <el-button
                        :loading="loading"
                        type="primary"
                        style="width:100%;height:50px;margin-top: 40px; font-size: 20px;"
                        size="default"
                        @click="submit"
                    >{{ text === "注册" ? "登录" : "注册" }}
                    </el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<style scoped lang="scss">
.login-container {
    position: relative;

    .back {
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        object-fit: cover;
    }

    .form-container {
        position: absolute;
        width: 100vw;
        height: 100vh;
        padding-right: 11.5vw;
        align-items: flex-end;

        .login-form {
            box-shadow: 20px 19px 2px 0px RGBA(86, 97, 156), 40px 40px 2px 0px RGBA(86, 97, 156, .8);
            width: 390px;
            height: 677px;
            box-sizing: border-box;
            padding: 80px 40px 80px 40px;
            border-radius: 5px;
            background-color: white;
        }
    }
}
.code-image {
    width: 118px;
    height: 48px;
    border-radius: 6px;
    //position: absolute;
    //right: 0;
    border: 1px #e4e7eb solid;
}
.code-input{
    flex: 1;
}
</style>
